<template>
	<view class="have-fixed-bottom">


		<view>
			<view class="module-canvans" v-if="defaultWidth" style="height: 600rpx;">
				<!-- <view :class="(showImg || showImgHandle)?'canvanHide':''"> -->
					<view :class="(showImg || showImgHandle || showAddWord || showAllPic || showTips)?'canvanHide':''">
					<canvas-drag pageType="word" :class="(showImg || showImgHandle || showAddWord || showAllPic || showTips)?'canvanHide':''" ref="canvasRef" id="canvas-drag" :graph="graph" :width="375" :height="300"
						enableUndo="true" @getIndex="getIndex"></canvas-drag>
				</view>
			</view>
			<view class="u-flex bm p15">
				<view @click="popupList=localList,curFiled='local',showPopup=true" class="fz12 mr20">
					位置：{{localList[form.local]}}<u-icon class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
				<view @click="popupList=fuList,curFiled='fu',showPopup=true" class="fz12">辅助线：{{fuList[form.fu]}}<u-icon
						class="ml6 fz10 c9" name="arrow-down-fill"></u-icon></view>
			</view>


			<view scroll-y="true" class="specs p15" style="width: auto;">


				<view class="specs mb16" v-for="(item, index) in propertyList" :key="index">
					<view class="specs-hd p-20-0">
						<text class="f12 c6">{{ item.propertyName }}</text>
					</view>
					<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
						<view :class="['sku-item',item.curIndex==index1?'on':'']"
							v-for="(item1,index1) in item.valueList" :key="index1" @click="selectSku(index,index1)">
							<image v-if="item1.valuePicture" :src="item1.valuePicture"
								style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
							</image>
							{{ item1.valueName }}
						</view>
					</view>
				</view>
				<!-- <view class="specs mb16" v-for="(item, index) in otherAttr" :key="index">
					<view class="specs-hd p-20-0">
						<text class="f12 c6">{{ item.propertyName }}</text>
					</view>
					<view class="u-flex sku-color" style="flex-wrap: wrap;" v-if="item.valueList">
						<view :class="['sku-item',curColor==index1?'on':'']" v-for="(item1,index1) in item.valueList"
							:key="index1" @click="curColor=index1">
							<image v-if="item1.valuePicture" :src="item1.valuePicture" class="img">
							</image>

						</view>
					</view>
				</view> -->

				<view class="specs mb16">
					<view class="specs-hd p-20-0 u-flex u-f-jsb">
						<text class="f12 c6">文字</text>
						<u-icon name="checkmark" class="fz20" @click="onAddText"></u-icon>
					</view>
					<view class="brs5 p15 pl0 mt10" style="background: rgba(25,41,28,0.05); ">
						<input type="text" v-model="addWord" placeholder="请输入logo文字" />
					</view>
				</view>



			</view>
			<view class="fixed-bottom p15 pt0">
				<view class="u-flex module-next p15">
					<view class="u-flex u-f-jsb u-f1 pr20">
						<view class="fz20 u-font-bold">￥{{curSku.price}}</view>
						<view class="item" :class="[curAction==2?'on':'']" @click="curAction=2,onExport()">
							<u-icon name="eye"></u-icon>
							<view class="fz12">预览效果</view>
						</view>
					</view>
					<view class="btn-sure" @click="toShow">确定</view>
				</view>


			</view>
		</view>


		<u-picker @confirm="popupConfirm" mode="selector" v-model="showPopup" :range="popupList"></u-picker>


<u-popup duration="0" :mask-close-able="false" v-model="showImg" mode="center" border-radius="20"
			:closeable="false">
			<view class="p20" style="width: 700rpx;">
				<image style="width: 100%;" class="mb20" :src="curImg" mode="widthFix"></image>

				<button class="bon" @click="closeImg">关闭</button>
			</view>
		</u-popup>


		<u-popup v-model="showTips" mode="center" border-radius="20" :closeable="false">
			<view class="p20" style="width: 600rpx;">
				<image src="../../static/image/ic-first-tips.png"
					style="display: block;margin: 0 auto;width: 72rpx;height: 72rpx;"></image>
				<view class="fz14 p15">
					{{remarkTips}}


				</view>
				<button class="bon" @click="showTips=false">确认</button>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import canvasDrag from "@/components/canvas-drag/index";
	export default {
		components: {
			canvasDrag
		},
		data() {
			return {
				graph: {},
				curCeng: -1,
				fontAttr: ['fontFirst', 'fontSecond', 'fontThird'],
				curFont: -1,
				curCengInfo: {},
				canvasBg: "",
				cateList: [],
				imageList: [],
				showAddWord: false,
				addWord: '',
				current: 0,
				showAllPic: false,
				showPopup: false,
				popupList: [],
				curTabWord: 0,
				curAction: 0,
				form: {
					local: 0,
					fu: 0
				},
				rgb: 'rgb(255,0,0)',
				tabWord: [{
					name: '字体'
				}, {
					name: '颜色'
				}, ],
				localList: ['正面', '背面'],
				fuList: ['开', '关'],
				curFiled: 'local',
				propertyList: [],
				otherAttr: [],
				remarkTips: '',
				info: {},
				curSku: {},
				haveWord: false,
				curColor: 0,
				showTips: false,
				defaultWidth:'',
				defaultLength:'',
				showImg:false,
				curImg: '',
				prodInfo: '',
				psdUrl: '',
			}
		},
		onLoad(e) {
// e.id = 100
// 			e.prodId = 21
				this.showTips = true
			// if (!this.$db.get('diyThirdTips')) {
			// 	this.showTips = true
			// 	this.$db.set('diyThirdTips', true)
			// }
			this.$api.dictList({
				dictType: 'diy_word'
			}, res => {
				if (res.code == 200) {
					this.remarkTips = res.data[1].remark
				}
			})
			
			
			this.$api.productInfo({
				id: e.prodId
			}, res => {
				if (res.code == 200) {
					this.prodInfo = res.data
					this.defaultWidth = res.data.defaultWidth
					this.defaultLength = res.data.defaultLength
					this.getSw(res.data.swUrl)
					this.onChangeBgImage(res.data.cxPreviewUrl)
				}
			})
			this.getInfo(26)
		},
		methods: {


				closeImg() {
					this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
					setTimeout(() => {
			
						this.showImg = false
					}, 10)
				},
			getSw(url) {

				if (this.$db.get('curSku')) {
					let curSku = this.$db.get('curSku')
					let attr = []
					curSku.properties.some((item) => {
						let i = {
							name: item.propertyName,
							value: item.valueName,
						}
						attr.push(i)
					})


					this.$api.diySwPreview({
						url,
						attrs: JSON.stringify(attr)
					}, res => {
						if (res.code == 200) {
							this.psdUrl = res.data
						}
					})
				}
			},
			getInfo(id) {
				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						this.propertyList = []
						this.info.groupList.some(item => {
							if (item.groupName == '材质/颜色') {
								this.otherAttr = item.propertyList
							} else {
								item.propertyList.some(spc => {
									this.$set(spc, 'curIndex', 0)
								})
								this.propertyList = [...this.propertyList, ...item.propertyList]
							}

						})
						this.getSkuValue()
					}
				})
			},

			selectSku(idx, idx1) {
				this.getSkuValue(idx, idx1)
			},

			getSkuValue(idx, idx1) {
				console.log(idx, idx1, 12344)
				let valueIds = []
				this.propertyList.some((item, index) => {
					if (idx == undefined || index != idx) {
						valueIds.push(item.valueList[item.curIndex].valueId)
					} else {
						valueIds.push(item.valueList[idx1].valueId)
					}

				})
				this.$api.productSku({
					spuId: this.info.id,
					valueIds: String(valueIds)
				}, res => {
					if (res.code == 200 && res.data) {
						this.curSku = res.data
						if (idx != undefined) {

							this.propertyList[idx].curIndex = idx1

						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			getIndex(res) {
				console.log(res)
				this.curCeng = res.index
				this.curCengInfo = res.info
			},
			toShow() {

				uni.navigateTo({
					url: '/pages/diy/show'
				})
			},
			popupConfirm(e) {
				console.log(e, 12)
				let ids = e[0]
				this.form[this.curFiled] = ids
			},
			/**
			 * 添加测试图片
			 */
			onAddTest() {
				this.setData({
					graph: {
						w: 120,
						h: 120,
						type: 'image',
						url: "/static/assets/images/test.jpg"
					}
				});
			},

			/**
			 * 添加图片
			 */
			onAddImage() {
				wx.chooseImage({
					success: res => {
						this.setData({
							graph: {
								w: 200,
								h: 200,
								type: 'image',
								url: res.tempFilePaths[0]
							}
						});
					}
				});
			},

			/**
			 * 添加文本
			 */
			onAddText() {
				if (!this.addWord) {

					uni.showToast({
						title: '请输入文字',
						icon: 'none'
					});
					return
				}

				let font = 'Arial'
				if (this.curFont >= 0) {
					font = this.fontAttr[this.curFont]
				}
				if (!this.haveWord) {
					this.setData({
						graph: {
							type: 'text',
							color: this.fontColor,
							fontFamily: font,
							text: this.addWord
						}
					});
					this.haveWord = true
				} else {
					console.log(this.addWord, 44444)
					this.$refs.canvasRef.changText(0, this.addWord)
				}
			},


			/**
			 * 导出图片
			 */
			onExport() {






				this.showImg = true

				wx.getImageInfo({
					src: this.psdUrl,
					complete: (res) => {
						console.log(res.path, 1111)
						this.$refs.canvasRef.changeBgImage1(res.path)


						setTimeout(() => {

							this.$refs.canvasRef.exportFun().then(filePath => {
								console.log(filePath);
								this.curImg = filePath
							}).catch(e => {
								console.error(e);
							});
						}, 50)
					}
				})

			},
			/**
			 * 改变文字颜色
			 */
			onChangeColor() {
				this.$refs.canvasRef.changColor('blue');
			},

			/**
			 * 改变背景颜色
			 */
			onChangeBgColor() {
				this.$refs.canvasRef.changeBgColor('yellow');
			},

			
			/**
			 * 改变背景照片
			 */
			onChangeBgImage(url) {
			
			
				wx.getImageInfo({
					src: url,
					complete: (res) => {
			
						this.$refs.canvasRef.changeBgImage(res.path)
					}
				})
			},
			

			/**
			 * 导出当前画布为模板
			 */
			onExportJSON() {
				console.log(this.$refs.canvasRef, 1111111111111)
				this.$nextTick(() => {
					this.$refs.canvasRef.exportJson().then(imgArr => {
						console.log(JSON.stringify(imgArr));
					}).catch(e => {
						console.error(e);
					});
				})
			},

			onImport() {
				// 有背景
				// let temp_theme = [{"type":"bgColor","color":"yellow"},{"type":"image","url":"../../assets/images/test.jpg","y":98.78423143832424,"x":143.78423143832424,"w":104.43153712335152,"h":104.43153712335152,"rotate":-12.58027482265038,"sourceId":null},{"type":"text","text":"helloworld","color":"blue","fontSize":24.875030530031438,"y":242.56248473498428,"x":119.57012176513672,"w":116.73966979980469,"h":34.87503053003144,"rotate":8.873370699754087}];
				// 无背景
				let temp_theme = [{
					"type": "image",
					"url": "/static/assets/images/test.jpg",
					"y": 103,
					"x": 91,
					"w": 120,
					"h": 120,
					"rotate": 0,
					"sourceId": null
				}, {
					"type": "text",
					"text": "helloworld",
					"color": "blue",
					"fontSize": 20,
					"y": 243,
					"x": 97,
					"rotate": 0
				}];
				this.$refs.canvasRef.initByArr(temp_theme);
			},


			onClearCanvas: function(event) {
				let _this = this;

				_this.setData({
					canvasBg: null
				});
				this.$refs.canvasRef.clearCanvas();

				this.onChangeBgImage(this.prodInfo.cxPreviewUrl)
			},
			onUndo: function(event) {
				this.$refs.canvasRef.undo();
			}

		},
	}
</script>

<style lang="scss">
	.module-canvans {
		
			display: flex;
			align-items: center;
			justify-content: center;
		// background: #f5f5f5;
	}

	.bon {
		width: 100%;
		background: #70B52C;
		padding: 15rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}


	.module-action {
		.action-item {

			border-radius: 8rpx;
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
			width: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin: 0 15rpx;

		}
	}

	.btn-sure {

		width: 160rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}

	.module-next {
		background: rgba(25, 41, 28, 0.05);
		border-radius: 16rpx;

		.item {
			text-align: center;
			font-size: 40rpx;

			&.on {
				color: #FE3307;
			}
		}
	}

	// 字体引入
	@font-face {
		font-family: 'fontFirst';
		src: url('https://labulado.oss-cn-guangzhou.aliyuncs.com/fonts/%E6%BC%94%E7%A4%BA%E7%A7%8B%E9%B8%BF%E6%A5%B72.0.subset.woff2') format('truetype');
	}

	.test {
		font-family: "fontFirst";
	}


	.sku-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width: 200rpx;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right: 24rpx;

		&.on {
			border: 1px solid #70B52C !important;
			color: #70B52C;
		}
	}

	.sku-color {
		.sku-item {
			width: 44px;
			height: 44px;
			border: none;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 44px;
			border-radius: 50%;
		}

		.img {
			width: 36px;
			height: 36px;
			display: block;
			border-radius: 50%;
		}
	}
	.page-diy {
		padding: 0 0 300rpx;
	}
	.canvanHide{
		transform: translate(-100%,-100%);
		
	}
</style>